<template lang="pug">
  .m-map
    .title 智慧家庭云资源部署架构
    .panel
      .item(v-for="item in nums")
        .subtitle {{item.subtitle}}
        .nums
          .num(v-for="n in addZero(item.value)") {{n}}
          .unit {{item.unit}}
    .arrange
      .subtitle
        div
        div 部署架构图
        div

      .areas
        .item
        .item
        .item
        .item
        .bar(ref="bar" :style="styleObject")
      .main()
        svg
          filter(id="blurMe")
            feGaussianBlur(in="SourceGraphic" stdDeviation="1")
          defs
            linearGradient(id="grad1"   x1="0%" y1="0%" x2="0%" y2="30%")
              stop(offset="0%" style="stop-color:#fff;stop-opacity:0.3")
              stop(offset="100%" style="stop-color:fff;stop-opacity:0.6")
          defs
            radialGradient(id="grad2"  cx="50%" cy="50%" r="100%" fx="50%" fy="50%")
              stop(offset="0%" style="stop-color:#059cba")
              stop(offset="100%" style="stop-color:#fff;")
          path(v-for="(item,index) in areasPath" fill="transparent" stroke="#00e5ff" stroke-linecap="round" stroke-width="1"
            :d="item" :id="index")
          path(v-for="item in areasPath" fill="transparent" stroke="url(#grad1)" stroke-linecap="round" stroke-width="2"
            :d="item" class="line1" filter="url(#blurMe)")

          animateMotion(xlink:href="#svg_2" dur="15s" begin="0s" fill="freeze" repeatCount="indefinite" rotate="auto")
            mpath(xlink:href="#0" )
          //- 弧线
          path(v-for="curve in curves" stroke="url(#grad2)"  fill="transparent"  stroke-linecap="round" stroke-width="1"
            :d="curve")
        coord-map
        .cylinder 云间高速
        .curvebox(v-show="false")
          .curve(v-for="curve,index in curves" )
        .center
          div

</template>
<script>
import echarts from 'echarts'
import CoordMap from './map'
const nums = [
  {
    value: 0,
    subtitle: '账单总额',
    unit: '万元'
  },
  {
    value: 0,
    subtitle: '订单数量',
    unit: '万条'
  },
  {
    value: 0,
    subtitle: '工单数量',
    unit: '万条'
  }
]
const areasPath = [
  'M76 0 L76 18  L431 18  L431 61',
  'M315 0 L315 12  L434 12  L434 61',
  'M553 0 L553 12  L437 12  L437 61',
  'M792 0 L792 18  L440 18  L440 61'

]
const curves = [
  'M140 120 Q350 60 433 205',
  'M50 96 Q350 -10 433 205',
  'M65 156 Q300 50 433 205',
  'M110 220 Q300 110 433 205',
  'M190 260 Q300 140 433 205',
  'M200 170 Q300 110 433 205',
  'M280 135 Q350 120 433 205',
  'M290 225 Q350 170 433 205',
  'M305 385 Q350 200 433 205',
  'M385 300 Q430 280 433 205',
  'M180 55 Q430 40 433 205',
  'M460 150 Q460 160 433 205',
  'M555 120 Q500 120 433 205',
  'M555 50 Q470 90 433 205',
  'M585 20 Q450 90 433 205',
  'M690 55 Q450 90 433 205',
  'M640 85 Q450 110 433 205',
  'M656 165 Q600 110 433 205',
  'M560 195 Q530 170 433 205',
  'M475 250 Q460 200 433 205',
  'M660 270 Q560 180 433 205',
  'M605 330 Q560 200 433 205',
  'M480 380 Q500 300 433 205',
  'M555 465 Q540 280 433 205',
  'M750 365 Q540 190 433 205'
]

function initBar () {
  const option = {
    grid: {
      left: '4%',
      right: 0,
      top: '20%',
      bottom: '25%'
    },
    xAxis: {
      type: 'category',
      data: ['主机', '存储', '贷款'],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#a1ebeb'
      }
    },
    yAxis: {
      show: false,
      type: 'value'

    },
    series: [
      {
        name: '直接访问',
        type: 'bar',
        stack: '总量',
        barWidth: 17,
        itemStyle: {
          normal: {
            color: '#5acadb'
          }
        },
        label: {
          normal: {
            show: true,
            position: 'top',
            formatter: ({ dataIndex, value }) => {
              const unit = ['台', 'GB', 'MB']
              return `${value}${unit[dataIndex]}`
            }
          }
        },
        data: [8, 12, 6]
      }
    ]
  }
  let el = this.$refs.bar
  this.bar = echarts.init(el)
  echarts.init(el).setOption(option)
  let index = 1
  setInterval(() => {
    if (index === 4) index = 0
    this.slidePlay(index)
    index++
  }, 10000)
}

function slidePlay (index) {
  const data = [[10, 20, 30], [10, 10, 30], [10, 20, 10], [10, 20, 5]]
  const lefts = [37, 276, 515, 754]
  let option = this.bar.getOption()
  option.series[0].data = data[index]
  this.styleObject.left = lefts[index] + 'px'
  this.bar.setOption(option)
}

export default {
  components: { CoordMap },
  data () {
    return {
      areasPath,
      curves: [],
      nums,
      bar: null,
      styleObject: {
        left: '37px'
      }
    }
  },
  mounted () {
    this.initBar()
  },
  methods: {
    getPath (val) {
      return {
        offsetPath: `path(${val})`
      }
    },
    addZero (num) {
      const ret = '000000' + num
      let str = ret.substring(ret.length - 5)
      return [...str]
    },
    initBar,
    slidePlay
  }

}
</script>

<style lang="stylus" scoped>
curves ={
  "0":'M150 120 Q350 60 450 205',
  "1":'M60 96 Q350 -10 450 205',
  "2":'M75 156 Q300 50 450 205',
  '3':'M120 220 Q300 110 450 205',
  '4':'M200 260 Q300 140 450 205',
  '5':'M210 170 Q300 110 450 205',
  '6':'M290 135 Q350 120 450 205',
  '7':'M305 225 Q350 170 450 205',
  '8':'M315 385 Q350 200 450 205',
  '9':'M395 300 Q430 280 450 205',
  '10':'M190 55 Q430 40 450 205',
  '11':'M470 150 Q460 160 450 205',
  '12':'M470 150 Q460 160 450 205',
  '13':'M565 120 Q500 120 450 205',
  '14':'M565 50 Q470 90 450 205',
  '15':'M595 20 Q450 90 450 205',
  '16':'M700 55 Q450 90 450 205',
  '17':'M650 85 Q450 110 450 205',
  '18':'M666 165 Q600 110 450 205'
  '19':'M570 195 Q530 170 450 205',
  '20':'M485 250 Q460 200 450 205',
  '21':'M670 270 Q560 180 450 205',
  '22':'M615 330 Q560 200 450 205',
  '23':'M490 380 Q500 300 450 205',
  '24':'M565 465 Q540 280 450 205',
  '25':'M760 365 Q540 190 450 205'}

.m-map
  width 907px
  padding 0 28px
  font-family 'DS-Digital-Bold'
  .title
    font-family 'DS-Digital-Bold'
    font-size 40px
    font-weight bold
    letter-spacing 2px
    margin-top 19px
    text-align center
    color #39d6fe
    margin-bottom 53px
  .panel
    display flex
    justify-content space-between
    margin-bottom 76px
    .item
      .subtitle
        font-size 16px
        font-weight bold
        color #9dd0e2
        height 16px
        margin-bottom 17px
      .nums
        display flex
        align-items flex-end
        .num
          font-family DS-Digital-Bold
          width: 37px;
          height: 46px;
          background-image: linear-gradient(0deg, #00e4ff 17%, #00baff 100%);
          border-radius: 2px;
          margin-right 5px
          font-size 44px
          letter-spacing 2px
          line-height @height
          text-align center
          color #ffffff
        .unit
          font-size 14px
          color #ffffff
          margin-left 6px

  .arrange
    .subtitle
      display flex
      justify-content space-between
      margin-bottom 23px
      div
        flex 1
        height 26px
        font-size 26px
        color #39d6fe
        text-align center
        &:last-child
          width 230px
          background-image url('img/line.png')
          background-repeat no-repeat
          background-position right bottom
      &:first-of-type
        background-image url('img/line.png')
        background-repeat no-repeat
        background-position left bottom
    .areas
      display flex
      justify-content space-between
      margin-bottom 2px
      position relative
      padding 0 26px
      padding-top 73px
      .item
        width 139px
        height 173px
        &:nth-child(1)
          background url('img/shanghai.png') no-repeat
        &:nth-child(2)
          background url('img/suzhou.png') no-repeat
        &:nth-child(3)
          background url('img/guizhou.png') no-repeat
        &:nth-child(4)
          background url('img/neimeng.png') no-repeat
      .bar
        position absolute
        top 0
        width 200px
        height 131px
        border-radius 10px
        background #3e80a2
        transition all  2s

    .main
      width 802px
      height 512px
      position relative
      display block
      margin-left 13px
      // background url('img/map.png') no-repeat
      background-size cover
      // margin-top 300px
      svg
        position absolute
        top 0
        left 0
        width 810px
        height 512px
        .line1
          stroke-dasharray: 10 1000;
          stroke-dashoffset: -500;
          animation: line-data 15s linear normal infinite;
      .cylinder
        position absolute
        top 40px
        left 416px
        width 37px
        height 91px
        color #f0f7c2
        box-sizing border-box
        text-align center
        letter-spacing 0
        padding 5px
        text-align center

        padding-top 28px
        color #fff
        background url('img/cylinder.png') no-repeat
        background-size cover
      .ball1
      .ball2
      .ball3
      .ball4
        position absolute
        top 0
        // transform: rotate(-90deg) translateX(30px) translateY(-8px);
        // top px
        // width 6px
        // height 3px
        background-color #ffffff

        opacity 0.8
        offset-distance: 0
        animation: red-ball 15s linear normal infinite;

        offset-path path('L431 6 L431 18  L76 18 L76 0 ')
        &.ball1
          offset-path path('L431 61L431 18 L76 18 M76 0 ')
        &.ball2
          offset-path path('L434 61 L434 12 L315 12 M315 0 ')
        &.ball3
          offset-path path('L437 61 L437 12 L553 12  M553 0')
        &.ball4
          offset-path path('L440 61 L440 18 L792 18 M792 0 ')
      .curvebox
        position absolute
        width 100%
        height 100%
        top 0
        left 0
        .curve
          position absolute
          width 6px
          height 6px
          background-color #1f91b5
          border-radius 50%
          opacity 0.8
          offset-distance: 0
          box-shadow 0 0 5px #1f91b5
          animation: red-ball 7s linear alternate infinite;
          for name,curve in curves
            &:nth-child({name})
              offset-path path(curve)

      .center
        width 94px
        height 50px
        background-color #00e5ff
        opacity 0.2
        border-radius 50%
        position absolute
        top 180px
        left 51%
        transform translateX(-17px)
        >div
          width 44px
          height 24px
          background-color #00e5ff
          opacity 0.4
          border-radius 50%
          margin 0 auto
@keyframes red-ball
  from
    offset-distance: 0%;
  to
    offset-distance: 100%;

@keyframes line-data
  from
     stroke-dashoffset: -500;
  to
    stroke-dashoffset: 0;
</style>
